<template>
  <ItemMusicTop :playlist="state.playlist"></ItemMusicTop>
  <ItemMusicList :itemList="state.itemList" :subscribedCount="state.playlist.subscribedCount"></ItemMusicList>
</template>

<script>
// 引入 useRouter ，可拿到传进来的 id值，也就是 hash 地址的id
import { useRoute } from 'vue-router'
import { onMounted, reactive } from 'vue'
import { getMusicItemList, getItemList } from '@/request/api/item.js'
// 引入子组件
// 歌单详情
import ItemMusicTop from '@/components/item/ItemMusicTop'
// 歌单列表
import ItemMusicList from '@/components/item/ItemMusicList.vue'

// 默认导出
export default {
  setup() {
    const state = reactive({
      playlist: [], // 歌单详情页的数据
      itemList: [], // 歌单歌曲
    })
    onMounted(async () => {
      const id = useRoute().query.id
      // console.log(useRoute())
      // ',' expected.Vetur(1005)
      // 调用请求方法，将 id 传过去，获取歌单详情
      const res = await getMusicItemList(id)
      // console.log(res)
      state.playlist = res.data.playlist

      // 获取歌单的歌曲
      const resulte = await getItemList({ id, limit: 10, offset: 0 })
      // console.log(resulte)
      state.itemList = resulte.data.songs
      // 防止数据丢失，一般将数据保存到 sessionStorage 里面
      sessionStorage.setItem('itemDetail', JSON.stringify(state))
    })
    return { state }
  },
  // 注册组件
  components: {
    ItemMusicTop,
    ItemMusicList,
  },
}
</script>

<style></style>
